<template>
  <div v-if="nodeDtos.length > 0">
    <div class="nodeDtos" v-if="type === '0' || type === '1'">
      <div class="head" v-if="showTitle">发起流程</div>
      <div class="content">
        <div v-for="(item, index) in nodeDtos" :key="index" class="box">
          <div class="left">
            <img class="picture" :src="
                item.nodeType == 'APPROVER'
                  ? imgAPPROVER
                  : item.nodeType == 'START'
                  ? imgSTART
                  : imgNOTIFIER
              " alt="" />
            <div v-if="index !== nodeDtos.length - 1" style="
                width: 1px;
                min-height: 40px;
                height: 100%;
                background: #eee;
                margin-left: 25px;
              "></div>
          </div>

          <div class="center">
            <p class="title">{{ item.nodeName }}</p>
            <p>{{ getNodeDes(item) }}</p>
            <!-- <p class="name">{{ item.operatorList[0].realName }}{{ item.nodeStautsDesc }}</p>
            <p class="remarks">{{ item.operatorList[0].opinion }}</p> -->
          </div>
          <div class="right">
            <div class="flex">
              <div v-if="item.operatorList && item.operatorList.length === 1">
                <div v-for="(i, j) in item.operatorList
                    ? item.operatorList.slice(0, 1)
                    : item.operatorList" :key="j" style="position: relative">
                  <img v-if="i.picUrl" class="pictures" :src="i.picUrl" alt="" />
                  <span v-else class="pictures">{{
                    i.realName.slice(-2)
                  }}</span>
                  <a-icon v-if="item.approvalType == 'target_select'" class="close" @click="del(index, j)" type="close-circle" />
                  <p class="name">{{ i.realName }}</p>
                </div>
              </div>
              <div @click="seeAll(item)" v-if="item.operatorList && item.operatorList.length > 1" style="cursor: pointer">
                <span class="pictures">···</span>
                <p class="name" style="margin-left:-6px">查看全部</p>
              </div>
              <div class="plus" @click="selectUser(item, index)" v-if="
                  (item.approvalType == 'target_select' &&
                    !item.operatorList) ||
                  item.operatorList.length === 0 ||
                  item.properties.actionerRules[0].multi
                ">
                <a-icon type="plus" style="font-size: 25px; color: #1890ff" />
              </div>
            </div>
          </div>
        </div>
      </div>
      <ContactPickers :visible="selectShow" :approvedby="memberList" ref="mychild" :max="
          itemList.approvalType == 'target_select' &&
          itemList.properties.actionerRules[0].multi
            ? 9999
            : 1
        " @closePicker="closePicker" @confirm="onChangeUserName" />
      <a-modal title="全部人员" :visible="allShow" @cancel="allShow = false" :footer="null">
        <div class="flex">
          <div v-for="(i, j) in itemList.operatorList" :key="j" style="position: relative">
            <img v-if="i.picUrl" class="pictures" :src="i.picUrl" alt="" />
            <span v-else class="pictures">{{ i.realName.slice(-2) }}</span>
            <a-icon v-if="itemList.approvalType == 'target_select'" class="close" @click="del(itemIndex, j)" type="close-circle" />
            <p class="name">{{ i.realName }}</p>
          </div>
        </div>
      </a-modal>
    </div>
    <div class="nodeDtos" v-else-if="type === '2' && shows">
      <div class="head" v-if="showTitle"><span class="icon"></span> 审批流程</div>
      <div class="content">
        <div v-for="(item, index) in nodeDtos" :key="index" class="box">
          <div class="left">
            <div v-if="item.operatorList.length < 2">
              <img v-if="item.operatorList[0].picUrl" class="picture" :src="item.operatorList[0].picUrl" alt="" />
              <span v-else class="picture">{{
                item.operatorList[0].realName.slice(-2)
              }}</span>
            </div>
            <div v-if="item.operatorList.length > 1">
              <img class="picture" :src="item.nodeType == 'APPROVER' ? imgAPPROVER : imgNOTIFIER" alt="" />
            </div>
            <div v-if="
                index !== nodeDtos.length - 1 &&
                index <= result.approvedNodeNum - 2
              " style="
                width: 1px;
                min-height: 40px;
                height: 100%;
                background: #1890ff;
                margin-left: 25px;
              "></div>
            <div v-if="
                index !== nodeDtos.length - 1 &&
                index > result.approvedNodeNum - 2
              " style="
                width: 1px;
                min-height: 40px;
                height: 100%;
                background: #eee;
                margin-left: 25px;
              "></div>
          </div>

          <div class="center">
            <div v-if="item.operatorList.length < 2">
              <p class="title">{{ item.nodeName }}</p>
              <p class="name">
                {{ item.operatorList[0].realName }}{{ item.nodeStautsDesc }}
              </p>
              <p class="remarks">{{ item.operatorList[0].opinion }}</p>
              <div style="margin: 10px 0">
                <p v-if="item.operatorList[0].fileUrl">附件：</p>
                <!-- <file-detail :ids="item.operatorList[0].fileUrl"></file-detail> -->
                <upload iconType="fj" :showUpload="false" :fileIds="item.operatorList[0].fileUrl"></upload>
              </div>
            </div>
            <div v-if="item.operatorList.length > 1">
              <p class="title">{{ item.nodeName }}</p>
              <p v-if="item.nodeStauts == 'running'">
                {{ item.operatorList.length }}人{{ getActivateType(item) }}
              </p>
              <div class="flex">
                <div v-for="(i, j) in item.operatorList" :key="j">
                  <img v-if="i.picUrl" class="pictures" :src="i.picUrl" alt="" />
                  <span v-else class="pictures">{{
                    i.realName.slice(-2)
                  }}</span>
                  <p class="name">{{ i.realName }}</p>
                </div>
              </div>
            </div>
          </div>
          <div class="right">{{ item.approvalTime }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  getSelectListByIds,
  getRoleNotContainsMe,
  getEnableOne,
} from "@/api/api";
import { getAction } from "@/api/manage";
import ContactPickers from "@/components/choiceuse/ContactPicker";
import upload from "@/components/upload/upload";
export default {
  name: "examine",
  props: {
    type: {
      type: String,
      default: "0", //0是新增1是编辑2是详情
    },
    id: {
      type: String,
      default: "",
    },
    ids: {
      type: String,
      default: "",
    },
    showTitle: {
      type: Boolean,
      default: true,
    },
  },
  components: { ContactPickers, upload },
  data() {
    return {
      url: {
        list: "/jksaas-produce/produce/proc/model/lineInfo", //获取流程审批节点
        detail: "/jksaas-produce/produce/proc/inst/getApprovalLine", //获取详情中流程流转记录
      },
      imgSTART: require("../../assets/process/START.png"),
      imgAPPROVER: require("../../assets/process/APPROVER.png"),
      imgNOTIFIER: require("../../assets/process/NOTIFIER.png"),
      stepsList: {
        START: "发起人",
        APPROVER: "审批人",
        END: "结束节点",
        NOTIFIER: "抄送人",
      }, //流程类型映射
      allShow: false, //人员弹窗
      result: {},
      nodeDtos: [], //流程节点
      selectShow: false, //选择人员弹窗
      itemList: {},
      itemIndex: null,
      memberList: [],
      userValue: null,
      shows: true,
    };
  },
  created() {
    if (this.ids) {
      getEnableOne({ id: this.ids, type: "add" }).then((res) => {
        if (res.result && res.result == "false") {
          this.shows = false;
        } else {
          this.shows = true;
        }
      });
    }
    // '1170001'
    this.$nextTick(() => {
      if (this.type === "2") {
        getAction(this.url.detail, { flowInstId: this.id }).then((res) => {
          console.log(res, "detail");
          if (res.success && res.result) {
            this.result = res.result;
            this.nodeDtos = this.result.nodeDtos.filter(
              (item) => item.nodeType != "SERVICE"
            );
          } else {
            // this.$antdMessage.warning(res.message)
          }
        });
      } else {
        // 'WMS_GOODS'
        getAction(this.url.list, {
          entityCode: this.id,
          operateType: this.type == "0" ? "add" : "edit",
        }).then((res) => {
          console.log(res, "aaaa");
          if (res.success && res.result) {
            this.result = res.result;
            this.nodeDtos = this.result.nodeDtos.filter(
              (item) => item.nodeType != "SERVICE"
            );
          } else {
            // this.$antdMessage.warning(res.message)
          }
          this.$emit('loadNodeDtos', this.nodeDtos)
        });
        // this.nodeDtos = this.result.nodeDtos.filter((item) => item.nodeType != 'SERVICE')
      }
    });
  },
  methods: {
    getNodeDes(item) {
      const rangeSelect = {
        labels: "角色",
        approvals: "指定成员",
        allStaff: "全公司",
      };
      if (item.nodeType === "APPROVER") {
        const num = item.operatorList ? item.operatorList.length + "人" : "";
        return num ? num + "审批" : "请选择审批人";
      }
      if (item.nodeType === "NOTIFIER") {
        const type = rangeSelect[item.approvalType];
        const num = item.operatorList ? item.operatorList.length + "人" : "";
        return "抄送人" + num;
      }
      return item.nodeType !== "END" ? this.stepsList[item.nodeType] : "";
    },
    getActivateType(item) {
      if (item.properties.actionerRules[0].type === "target_originator") {
        return "";
      }
      if (item.properties.activateType) {
        if (item.properties.activateType === "ONE_BY_ONE") {
          return "依次审批";
        } else if (item.properties.agreeAll) {
          return "会签";
        } else {
          return "或签";
        }
      }
    },
    // 全部人员
    seeAll(e) {
      console.log(e, "全部人员");
      this.itemList = e;
      this.allShow = true;
    },
    // 选择人员
    selectUser(e, index) {
      this.itemList = e;
      this.itemIndex = index;
      let selectType = e.properties.actionerRules[0].select
        ? e.properties.actionerRules[0].select[0]
        : "";
      if (selectType === "approvals") {
        let arr = e.properties.actionerRules[0].range.approvals;
        getSelectListByIds({ ids: arr.toString() }).then((res) => {
          console.log(res, "approvals");
          this.memberList = res.result.map((e) => {
            return {
              realname: e.realname,
              id: e.id,
            };
          });
        });
      } else if (selectType === "labels") {
        getRoleNotContainsMe({
          roleId: e.properties.actionerRules[0].range.role[0].roleId,
          userKey: this.nodeDtos[0].operatorList[0].userId,
        }).then((res) => {
          console.log(res, "labels");
          this.memberList = res.result.map((e) => {
            return {
              realname: e.realName,
              id: e.userId,
            };
          });
        });
      }

      if (!this.itemList.operatorList) {
        this.itemList.operatorList = [];
      }
      if (
        this.itemList.properties.actionerRules[0].multi &&
        selectType !== "allStaff"
      ) {
        this.userValue = [];
      } else {
        this.userValue = null;
      }
      this.$refs.mychild.getList();
      this.selectShow = true;
      this.$emit("getUserState", true);
    },
    closePicker() {
      this.selectShow = false;
      this.$emit("getUserState", false);
    },
    onChangeUserName(a, b, c) {
      console.log(a, b, c);
      if (!this.nodeDtos[this.itemIndex].operatorList) {
        this.nodeDtos[this.itemIndex].operatorList = [];
      }
      if (this.itemList.properties.actionerRules[0].multi) {
        let arr = b.map((e) => {
          return {
            realName: e.realname,
            userId: e.id,
          };
        });
        this.nodeDtos[this.itemIndex].operatorList = [
          ...this.nodeDtos[this.itemIndex].operatorList,
          ...arr,
        ];
        let map = new Map();
        for (let i of this.nodeDtos[this.itemIndex].operatorList) {
          if (!map.has(i.userId)) {
            map.set(i.userId, i);
          }
        }
        this.nodeDtos[this.itemIndex].operatorList = [...map.values()];
        this.selectShow = false;
        this.$emit("getUserState", false);
      } else {
        // this.nodeDtos[this.itemIndex].operatorList.forEach((item) => {
        //   if (b[0].id === item.userId) {
        //     this.$antdMessage.warning('人员已存在')
        //   }
        // })
        this.nodeDtos[this.itemIndex].operatorList.push({
          realName: b[0].realname,
          userId: b[0].id,
          picUrl: "",
        });
        let map = new Map();
        for (let i of this.nodeDtos[this.itemIndex].operatorList) {
          if (!map.has(i.userId)) {
            map.set(i.userId, i);
          }
        }
        this.nodeDtos[this.itemIndex].operatorList = [...map.values()];
        this.selectShow = false;
        this.$emit("getUserState", false);
      }
    },

    // 删除
    del(a, b) {
      console.log(a, b);
      this.nodeDtos[a].operatorList.splice(b, 1);
    },
    confirm() {
      for (let i = 0; i < this.nodeDtos.length; i++) {
        this.nodeDtos[i].selectUsers = this.nodeDtos[i].operatorList;
      }
      const isproNo = this.nodeDtos.filter((item) => {
        if (item.nodeType === "SERVICE") {
          return false;
        }
        return item.nodeType !== "END"
          ? !item.selectUsers || item.selectUsers.length <= 0
          : false;
      });

      if (isproNo && isproNo.length > 0) {
        // this.$antdMessage.warning("节点信息必填");
        this.$toast("节点信息必填");
        this.$emit("fieldError");
        return;
      }
      let processDataVo = {
        formId: this.result.formId,
        nodeDtos: this.nodeDtos || [],
        processCode: this.result.processCode,
      };
      this.$nextTick(() => {
        // this.$parent.submitProcess(processDataVo)
        this.$emit("submitProcess", processDataVo);
      });
    },
  },
};
</script>
<style lang="less" scoped>
.nodeDtos {
  background: #fff;
  width: 100%;
  // height: 100%;

  .icon {
        display: inline-block;
        width: 0.03rem;
        height: 0.14rem;
        background: #1890ff;
        margin-right: 0.04rem;
      }
  .head {
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #191f25;
    padding: 0.16rem;
    border-bottom: 1px solid #eee;
  }
  .content {
    // width: 950px;
    margin-top: 2px;
    padding: 20px;
    .box {
      display: flex;
      justify-content: flex-start;
      position: relative;
      .left {
        width: 60px;
        .picture {
          width: 50px;
          height: 0.5rem;
          line-height: 0.5rem;
          text-align: center;
          color: #fff;
          background: #1890ff;
          display: block;
          border-radius: 8px;
        }
      }
      .center {
        min-width: 40vw;
        p {
          margin-bottom: 5px !important;
          padding: 0;
        }
        .title {
          font-size: 16px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #191f25;
          width: 100px;
        }
        .name {
          font-size: 14px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #888888;
        }
        .remarks {
          font-size: 14px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #444444;
          max-width: 70vw;
        }
        .flex {
          display: flex;
          justify-content: flex-start;
          .pictures {
            width: 50px;
            height: 0.5rem;
            line-height: 0.5rem;
            text-align: center;
            color: #fff;
            background: #1890ff;
            display: block;
            border-radius: 6px;
            font-size: 12px;
            margin-right: 20px;
          }
          .name {
            font-size: 14px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #888888;
            margin-top: 5px;
          }
        }
      }
      .right {
        position: absolute;
        right: 0;
        height: 12px;
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #888888;
        .flex {
          display: flex;
          justify-content: flex-start;
          .close {
            position: absolute;
            top: 0;
            right: 15px;
            cursor: pointer;
            color: #f5f5f5;
          }
          .pictures {
            width: 50px;
            height: 0.5rem;
            line-height: 0.5rem;
            text-align: center;
            color: #fff;
            background: #1890ff;
            display: block;
            border-radius: 6px;
            font-size: 12px;
            margin-right: 15px;
          }
          .name {
            font-size: 14px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #888888;
          }
          .plus {
            width: 50px;
            height: 0.5rem;
            line-height: 55px;
            text-align: center;
            color: #fff;
            border: 1px dashed #1890ff;
            display: block;
            border-radius: 6px;
            font-size: 12px;
            margin-right: 15px;
            cursor: pointer;
          }
        }
      }
    }
  }
}
.flex {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  .close {
    position: absolute;
    top: 0;
    right: 15px;
    cursor: pointer;
    color: #f5f5f5;
  }
  .pictures {
    width: 50px;
    height: 0.5rem;
    line-height: 0.5rem;
    text-align: center;
    color: #fff;
    background: #1890ff;
    display: block;
    border-radius: 6px;
    font-size: 12px;
    margin-right: 15px;
  }
  .name {
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #888888;
  }
}
</style>